<template>
  <div class="content_index">
    <div class="ci_header">
      <div class="ci_left">CPT列表</div>
    </div>
    <div class="ci_note">
      <DescriptionBlock data="展示CPT列表" />
    </div>
    <div class="ci_des">
      <div style="display: flex">
        <el-button plain @click="CPTCreate()" v-if="userType == '2'">创建CPT </el-button>
      </div>
      <div style="display: flex">

        <el-input
          style="margin-right: 10px"
          class="ci_input"
          v-model="issuerName"
          clearable
          v-if="userType == '0'"
          placeholder="请输入发证方名称查询"
        ></el-input>
        <!-- 搜索框 -->
        <el-input
          style="margin-right: 10px"
          class="ci_input"
          v-model="title"
          clearable
          placeholder="请输入CPT名称查询"
        ></el-input>
        <el-select
          v-model="searchStatus"
          clearable
          placeholder="请选择状态"
          style="margin-right: 10px"
        >
          <el-option label="待审核" value="0" />
          <el-option label="正常" value="1" />
          <el-option v-if="userType == '0'" label="停用" value="2" />
        </el-select>
        <div @click="search">
          <el-button plain>查询 </el-button>
        </div>
      </div>
    </div>
    <div class="ci_content">
      <div class="table_list">
        <div class="tl_table">
          <el-table
            v-loading="CPTLoading"
            :data="tableData"
            height="100%"
            width="100%"
            :header-cell-style="tableHeaderStyle"
            :cell-style="tableCellStyle"
          >
            <el-table-column prop="id" label="编号" width="150">
              <template v-slot="scope">
                <el-tooltip
                  effect="light"
                  :content="scope.row.id"
                  placement="top"
                >
                <div class="center_start">
                  <span
                    @click="CPTInfo(scope)"
                    style="font-size: 12px; cursor: pointer; color: #409eff"
                    class="ellipsis"
                  >
                    {{ scope.row.id }}
                  </span>
                </div>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column prop="title" label="CPT名称"  />
            <el-table-column prop="issuerName" label="发证方名称" v-if="userType == '0'" />
            <el-table-column prop="publisher" label="发布者ID" width="180">
              <template v-slot="scope">
                <el-tooltip
                  effect="light"
                  :content="scope.row.publisher"
                  placement="top"
                >
                <div class="center_start">
                  <span class="ellipsis">
                    {{ scope.row.publisher }}
                  </span>
                </div>
                </el-tooltip>
              </template>

              </el-table-column>
            <el-table-column prop="cptVersion" label="CPT版本" />
            <el-table-column prop="status" label="状态">
              <template v-slot="scope">
                <div class="center_start">
                    {{status[scope.row.status]  }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="createdTime" label="创建时间"  />
            <el-table-column prop="updatedTime" label="更新时间" />
            <el-table-column prop="" label="操作" v-if="userType == '2'">
              <template v-slot="scope">
                <div class="center_start">
                  <span
                    @click="editCPT(scope)"
                    style="font-size: 12px; cursor: pointer; color: #409eff"
                  >
                    编辑
                  </span>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="tl_table_pagination">
          <el-pagination
            background
            @size-change="handleSizeChange"
            :hide-on-single-page="page.isPageHide"
            @current-change="handleCurrentChange"
            :current-page.sync="page.pageNo"
            :page-size="page.pageSize"
            :page-sizes="[10, 15, 20, 30]"
            layout="total, prev, pager, next, sizes"
            :total="page.totalCount"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>
    
    <script setup>
import { DescriptionBlock } from "@/components/index";
import { tableHeaderStyle, tableCellStyle } from "@/utils/tableStyle";
import { getCPTlist } from "@/api/CPT";
import { ref, reactive, onMounted } from "vue";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
import store from "@/store";
const router = useRouter();
const CPTLoading = ref(false);
const userType = ref(""); //用户类型
const title = ref("");
const searchStatus =ref("");
const issuerName =ref("");
const page = reactive({
  pageSize: 10,
  pageNo: 1,
  isPageHide: false,
  totalPage: 0,
  totalCount: 0,
});
const status = ref({
  "0":"待审核",
  "1":"正常",
  "2":"停用"
})
const dialogWidth = ref("600px");
const tableData = ref([]);
const search = () => {
  getCPTList();
};
const CPTInfo = (data) => {
  let id = data.row.id;
  let status = data.row.status;
  router.push({ path: "/CPTManagement/CPTInfo" , query: { id  , status}});
};
const handleSizeChange = (val) => {
  page.pageNo = 1;
  page.pageSize = val;
  getCPTList();
};
const handleCurrentChange = (val) => {
  page.pageNo = val;
  getCPTList();
};
const setDialogWidth = () => {
  let val = document.body.clientWidth * 0.6;
  const def = 600; // 默认宽度
  if (val < def) {
    dialogWidth.value = "60%";
  } else {
    dialogWidth.value = def + "px";
  }
};
const CPTCreate = () => {
  router.push({ path: "/CPTManagement/CPTCreate" });
};
const editCPT = (data) => {
  let id = data.row.id 
  router.push({ path: "/CPTManagement/CPTCreate", query: { id }});
};
const getCPTList = () => {
  let parmars = {
    pageNum: page.pageNo,
    pageSize: page.pageSize,
    title: title.value,
    status:searchStatus.value,
    issuerName:issuerName.value
  };
  CPTLoading.value = true;
  getCPTlist(parmars)
    .then((res) => {
      if (res.success && res.data) {
        CPTLoading.value = false;
        tableData.value = res.data.list || [];
        page.totalCount = res.data.totalCount;
      } else {
        CPTLoading.value = false;
      }
    })
    .catch((err) => {
      ElMessage.error(err.msg);
      CPTLoading.value = false;
    });
};
onMounted(() => {
  setDialogWidth();
  getCPTList();
  userType.value =store.userStore.user.userType;
});
</script>
    <style lang="scss" scoped>
@import "../../assets/css/list.scss";
@import "../../assets/css/position.scss";

.content_index {
  :deep.el-input {
    width: 90%;
    max-width: 400px;
  }
  :deep .iconfont__header_icon {
    width: 16px;
    margin-top: 8px;
  }
  .title_personal {
    font-size: 16px;
    font-weight: 700;
  }
  .tl_table_pagination {
    width: 100%;
    display: flex;
    justify-content: end;
    padding-right: 16px;
  }
}
.content_index {
  :deep.el-select {
    width: 95%;
    border-radius: 0;

    :deep .el-input {
      width: 95%;
      border-radius: 0 !important;
    }
    .el-input__suffix {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .el-input__inner {
      height: 32px;
      line-height: 32px;
      border-radius: 0;
      font-size: 12px;
    }
  }
}

.aitem {
  cursor: pointer;
  color: #2186fb;
}

.nodata_tips {
  margin-left: 5px;
  color: #2186fb;
  cursor: pointer;
}
</style>